<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/common.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.2/vue.js"></script>
    <script>
        $(function () {
            fetch('/article/public_list')
                .then(res => {
                    console.log(res)
                    res.json().then(respData => {
                        console.log(respData)
                        new Vue({
                            el: '#articles_each',
                            data: {
                                list: respData
                            }
                        })
                    })
                }).catch(err => {
                    console.log('错误')
                })
        })
    </script>
    <style>
        .articles_each {
            display: flex;
            flex-wrap: wrap;
        }

        .articles {
            width: 1200px;
            padding: 20px;
        }

        .articles_each li {
            width: 50%;
            overflow: hidden;
            height: 250px;
        }

        .articles_each li img {
            width: 200px;
        }

        .articles_each li>a {
            display: flex;
        }

        @media (max-width:1200px) {
            .articles {
                width: 100%;
            }

            .articles_each li {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div class="articles">
        <ul class="articles_each" id="articles_each">
            <li v-for="articleObj in list">
                <a :href="'/userspace/article_visit.html?articleId='+articleObj.articleId" target="_blank">
                    <img :src="articleObj.img" alt="">
                    <div>
                        <h3>{{articleObj.title}}</h3>
                        <p>{{articleObj.summary}}</p>
                        <span>{{articleObj.publishDate}}</span>
                        <span>浏览量：{{articleObj.visitCount}}</span>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</body>

</html>